<template lang="">
  <div>
    分页展示订单
    <table>
      <tr>
        <td>名称</td>
        <td>状态</td>
      </tr>
      <tr v-for="i in list">
        <td>{{i.name}}</td>
        <td v-if='i.status == 1'>
          <van-button @click="updateStatus(i.id)">上线</van-button>
        </td>
         <td v-else>
          <van-button @click="updateStatus(i.id)" >上线</van-button>
        </td>

        <td>
          <van-pagination 
          v-model='page'
          :total-items="total"
          :items-pre-page="page_size"
          @change='change'
          />
        </td>
        
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[],
      page:1,
      page_size:2,
      total:0
    }
  },
  methods:{
    getlist(){
      this.axios.get('orderM?page='+this.page+'&page_size='+this.page_size).then(res=>{
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    change(p){
      this.page = p
      this.getlist()
    },
    // 状态切换
    updateStatus(id){
      this.axios.put('orderM?id+'+id).then(res=>{
        this.getlist()
      })
    }
  },
  mounted(){
    this.getlist()
  },
}

</script>

<style>

</style>